<template>
    <div>
        年龄：<input v-model.lazy="age" type="number">
        <h3>年龄阶段（简单）：{{ age < 18 ? '未成年' : '成年' }} </h3> <!-- 简单的表达式 -->
        <h3>年龄阶段（复杂）：{{ ageState }} </h3> <!-- 计算属性：年龄阶段 -->
    </div>

    <hr>
    <div>
        生日：<input v-model="birthday" type="date">
        <h3>星座：{{ constellation }}</h3>  <!-- 计算属性：星座 -->
    </div>
</template>

<script>
export default {
    data: () => ({
        age: 20, // 年龄
        birthday: '' // 生日
    }),
    computed: { // 计算属性选项
        ageState() { // 年龄阶段
            if (this.age < 18) {
                return '未成年'
            } else if (this.age < 50) {
                return '中年'
            } else {
                return '老年'
            }
        },
        constellation() { // 星座
            let birArr = this.birthday.split('-') // yyyy-MM-dd -> ['yyyy', 'MM', 'dd']
            let month = parseInt(birArr[1]) // 月份
            let day = parseInt(birArr[2]) // 日份
            switch (month) { // 判断
                case 1:
                    if (day <= 19) {
                        return '魔羯座'
                    } else {
                        return '水平座'
                    }
                case 2:
                    if (day <= 18) {
                        return '水平座'
                    } else {
                        return '双鱼座'
                    }
                default:
                    return '请选择日期'
            }
        }
    }
}
</script>